<style lang="scss" scoped>
        .viewDetailed{
          background: #fff;
          width: calc(100% - 318px);
          height: 100%;
          float: right;
          font-size: 12px;
          overflow: auto;
          padding-bottom: 10px;
          .mainTitle{
              background: #E2ECFA;
              height: 40px;
              border: 1px solid rgba(188, 188, 188, 0.28);
              line-height: 40px;
              padding: 0 10px;
              .imgLeft{
                width: 24px;
                float: left;
                margin-top: 8px;
              }
              p{
                float: left;
                margin-left: 22px;
                font-size: 14px;
                font-weight: 600;
              }
              .imgRight{
                width: 24px;
                float: right;
                font-size: 16px;
                cursor: pointer;
                color: #999999;
              }
            }

        .block{
          padding: 20px 0;
          .lists{
            .list{
              overflow: hidden;
              width: 100%;
              display: table;
              .text{
                width: 200px;;
                line-height: 100%;
                display:table-cell;
                vertical-align:middle;
                text-align: right;
                padding-right: 2%;
                .textTop{
                  font-size: 14px;
                  color: #333333;
                  font-weight: 600;
                }
                .textTopchild{
                  color: #CF352E;
                }
                .textBottom{
                  margin-top: 10px;
                  font-size: 12px;
                  color: #B9B9B9;
                }
              }
              .line{
                display:table-cell;
                width: 1px;
                position: relative;
                background: #D8D8D8;
                .qiu{
                  position: absolute;
                  width: 10px;
                  height:10px;
                  border: 2px solid #3185FF;
                  background: #fff;
                  top:calc(50% - 5px);
                  left:-5px;
                  border-radius: 50%;
                }
                .qiuchild{
                  border: 2px solid #CF352E;
                }
              }
              .info{
                display:table-cell;
                height:120px;
                .infoTable{
                  height: 100px;
                  width: 90%;
                  border: 1px solid #ececec;
                  margin: 0 auto;
                  margin-top:10px;
                  position: relative;
                  padding: 20px;
                  background: #FDFDFD;
                  cursor: pointer;
                  border-radius: 4px;
                  &::before{
                    content: " ";
                    position: absolute;
                    top: 46%;
                    left: -5px;
                    width: 10px;
                    height: 10px;
                    background: url("../../../assets/img/sanjiao.png") no-repeat;
                    background-size:6px;
                  }
                  // &::after{
                  //   content: " ";
                  //   position: absolute;
                  //   top: 41%;
                  //   left: -9px;
                  //   width: 0;
                  //   height: 0;
                  //     border-top: 8px solid transparent;
                  //     border-right: 9px solid #FFFFFF;
                  //     border-bottom: 9px solid transparent;
                  // }
                  ul{
                    li{
                        float: left;
                        width: 33%;
                        font-size: 14px;
                        color: #444444;
                        font-weight: 600;
                        span{
                          font-size: 12px;
                          color: #666666;
                        }
                    }
                  }
                  .infoTableContent{
                    margin-top: 4%;
                    li{
                      width: 100%;
                      p{
                        width: 70px;
                        float: left;
                        height: 100%;
                      }
                      span{
                        line-height: 16px;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                      }
                    }
                  }
                }
                .child{
                  border: 1px solid #E59390;
                  background: #FFFBFB;
                  &::before{
                    content: " ";
                    position: absolute;
                    top: 46%;
                    left: -6px;
                    width: 10px;
                    height: 10px;
                    background: url("../../../assets/img/sanjiao1.png") no-repeat;
                    background-size:6px;
                  }
                }
              }
            }
          }
        }
        }
</style>
<template>
  <div class="viewDetailed">
    <div class="mainTask">
      <div class="mainTitle">
        <img class="imgLeft" src="@/assets/img/change.png">
        <p>变更记录</p>
        <div class="imgRight">x</div>
        <!-- <img class="imgRight" src="../../assets/img/change.png"> -->
      </div>
      <div class="block">
        <ul v-for="i in 5" :key="i" class="lists">
          <li class="list">
            <div class="text">
              <div class="textTop" :class="i === childActive ? 'textTopchild' : ''">新增子任务1.1</div>
              <div class="textBottom">2020-01-01</div>
            </div>
            <div class="line">
              <i class="qiu" :class="i === childActive ? 'qiuchild' : ''" />
            </div>
            <div class="info">
              <div class="infoTable" :class="[i === childActive ? 'child' : '', i === 1 ? 'infoTableActive' :'']" @click="clickChild(i)">
                <ul>
                  <li>完成时间：<span>2020-01-01</span></li>
                  <li>任务来源：<span>2020-01-01</span></li>
                  <li>权重：<span>100%</span></li>
                </ul>
                <ul class="infoTableContent">
                  <li> <p>任务内容：</p> <span>任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务
                    任务内容任务内容</span></li>
                </ul>
              </div>

            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      input: '',
      childActive: ''
    }
  },
  mounted() {
    console.log('12')
    // this.$nextTick(() => {
    //   this.$refs['filterBank' + (this.filterArr.length - 2)][0].setAllAttribute({
    //     name: 'disabled',
    //     value: true
    //   })
    // })
  },
  methods: {
    clickChild(val) {
      this.childActive = val
    }
  }
}
</script>
